<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>北京西大校友产业生态圈联盟</title>

		<meta name="description" content="and Validation" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/static/ace/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="/static/ace/components/font-awesome/css/font-awesome.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="/static/ace/components/select2/dist/css/select2.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="/static/ace/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />


		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/static/ace/assets/css/ace-ie.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/static/ace/assets/js/ace-extra.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/static/ace/components/html5shiv/dist/html5shiv.min.js"></script>
		<script src="/static/ace/components/respond/dest/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="no-skin">

		<!-- /section:basics/navbar.layout -->
		<div class="main-container ace-save-state" id="main-container">
			<script type="text/javascript">
				try{ace.settings.loadState('main-container')}catch(e){}
			</script>

			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">

						<!-- /section:settings.box -->
						<div class="page-header">
							<h1>
								北京西大校友
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									产业联盟
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<!-- <h4 class="lighter">
									<i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
									<a href="#modal-wizard" data-toggle="modal" class="pink"> Wizard Inside a Modal Box </a>
								</h4> -->

								<!-- <div class="hr hr-18 hr-double dotted"></div> -->

								<div class="widget-box">
									<div class="widget-header widget-header-blue widget-header-flat">
										<h4 class="widget-title lighter">信息收集</h4>
									</div>

									<div class="widget-body">
										<div class="widget-main">
											<!-- #section:plugins/fuelux.wizard -->
											<div id="fuelux-wizard-container">
												<div>
													<!-- #section:plugins/fuelux.wizard.steps -->
													<ul class="steps">
														<li data-step="1" class="active">
															<span class="step">1</span>
															<span class="title">必填信息</span>
														</li>

														<li data-step="2">
															<span class="step">2</span>
															<span class="title">详细信息</span>
														</li>

														<li data-step="3">
															<span class="step">3</span>
															<span class="title">其他</span>
														</li>
													</ul>

													<!-- /section:plugins/fuelux.wizard.steps -->
												</div>

												<hr />

												<!-- #section:plugins/fuelux.wizard.container -->
												<div class="step-content pos-rel">
													<div class="step-pane active" data-step="1">
														<h3 class="lighter block green">请输入必填信息</h3>
														<form class="form-horizontal" id="validation-form" method="get">
															<div class="form-group">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="name">姓名:</label>

																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="text" name="name" id="name" class="col-xs-12 col-sm-6" />
																	</div>
																</div>
															</div>

															<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="mobile">手机号码:</label>
	
																	<div class="col-xs-12 col-sm-9">
																			<div class="input-group">
																					<span class="input-group-addon">
																						<i class="ace-icon fa fa-phone"></i>
																					</span>
			
																					<input type="tel" id="mobile" name="mobile" />
																			</div>
																	</div>
																</div>

																<div class="form-group">
																		<label class="control-label col-xs-12 col-sm-3 no-padding-right">性别:</label>
		
																		<div class="col-xs-12 col-sm-9">
																			<div>
																				<label class="line-height-1 blue">
																					<input name="sex" checked value="男" type="radio" class="ace" />
																					<span class="lbl"> 男</span>
																				</label>
																			</div>
		
																			<div>
																				<label class="line-height-1 blue">
																					<input name="sex" value="女" type="radio" class="ace" />
																					<span class="lbl"> 女</span>
																				</label>
																			</div>
																		</div>
																	</div>

															<div class="space-2"></div>

															<div class="form-group">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">密码:</label>

																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="password" name="password" id="password" class="col-xs-12 col-sm-4" />
																	</div>
																</div>
															</div>

															<div class="space-2"></div>

															<div class="form-group">
																<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">确认密码:</label>

																<div class="col-xs-12 col-sm-9">
																	<div class="clearfix">
																		<input type="password" name="password2" id="password2" class="col-xs-12 col-sm-4" />
																	</div>
																</div>
															</div>
														</form>
													</div>

													<div class="step-pane" data-step="2">
															<div class="alert alert-success">
																	<button type="button" class="close" data-dismiss="alert">
																		<i class="ace-icon fa fa-times"></i>
																	</button>
	
																	<strong>
																		<i class="ace-icon fa fa-check"></i>
																		完善个人信息
																	</strong>
	
																	以下信息为选填信息您可以直接跳过后注册
																	<br />
																</div>
															<form class="form-horizontal" id="no-validation-form" method="get">
	
																<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="nation">民族:</label>
	
																	<div class="col-xs-12 col-sm-9">
																		<div class="clearfix">
																			<input type="text" id="nation" name="nation" class="col-xs-12 col-sm-5" />
																		</div>
																	</div>
																</div>
	
																<div class="space-2"></div>
	
																<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="originaddress">籍贯:</label>
	
																	<div class="col-xs-12 col-sm-9">

																			<input type="text" id="originaddress" name="originaddress" class="col-xs-12 col-sm-5"/>

																	</div>
																</div>
	
																<div class="space-2"></div>
																<div class="form-group">
																		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="birthaddress">出生地:</label>
		
																		<div class="col-xs-12 col-sm-9">
	
																				<input type="text" id="birthaddress" name="birthaddress" class="col-xs-12 col-sm-5"/>
	
																		</div>
																	</div>
		
																	<div class="space-2"></div>
																	<div class="form-group">
																			<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="birthdate">出生日期:</label>
			
																			<div class="col-xs-12 col-sm-9">
		
																					<input type="text" id="birthdate" name="birthdate" class="col-xs-12 col-sm-5"/>
		
																			</div>
																		</div>
			
																		<div class="space-2"></div>
																		<div class="form-group">
																				<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="age">年龄:</label>
				
																				<div class="col-xs-12 col-sm-9">
			
																						<input type="text" id="age" name="age" />
			
																				</div>
																			</div>
				
																			<div class="space-2"></div>
																			<div class="form-group">
																					<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="college">学校学院:</label>
					
																					<div class="col-xs-12 col-sm-9">
				
																							<input type="text" id="college" name="college" class="col-xs-12 col-sm-5"/>
				
																					</div>
																			</div>
					
																			<div class="space-2"></div>
																			<div class="form-group">
																						<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="graduatedate">毕业时间:</label>
						
																						<div class="col-xs-12 col-sm-9">
					
																								<input type="text" id="graduatedate" name="graduatedate" class="col-xs-12 col-sm-5"/>
					
																						</div>
																			</div>
						
																			<div class="space-2"></div>
																			<div class="form-group">
																					<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="company">就职公司:</label>
					
																					<div class="col-xs-12 col-sm-9">
				
																							<input type="text" id="company" name="company" class="col-xs-12 col-sm-5"/>
				
																					</div>
																			</div>
					
																			<div class="space-2"></div>
																			<div class="form-group">
																					<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="address">联系地址:</label>
					
																					<div class="col-xs-12 col-sm-9">
				
																							<input type="text" id="address" name="address" class="col-xs-12 col-sm-5"/>
				
																					</div>
																			</div>
					
																			<div class="space-2"></div>
																			<div class="form-group">
																					<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="industry">所属行业:</label>
					
																					<div class="col-xs-12 col-sm-9">
				
																							<input type="text" id="industry" name="industry" class="col-xs-12 col-sm-5"/>
				
																					</div>
																			</div>
																			
	
																<div class="hr hr-dotted"></div>
	
															</form>
														</div>

													<div class="step-pane" data-step="3">
															<div class="alert alert-success">
																	<button type="button" class="close" data-dismiss="alert">
																		<i class="ace-icon fa fa-times"></i>
																	</button>
	
																	<strong>
																		<i class="ace-icon fa fa-check"></i>
																		完善个人信息
																	</strong>
	
																	以下信息为选填信息您可以直接下一步提交注册
																	<br />
																</div>
															<form class="form-horizontal" id="no-validation-comment-form" method="get">
	
																<div class="form-group">
																		<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="requirement">需求:</label>
		
																		<div class="col-xs-12 col-sm-9">
																			<div class="clearfix">
																				<textarea class="input-xlarge" name="requirement" id="requirement"></textarea>
																			</div>
																		</div>
																	</div>
																<div class="space-2"></div>
																<div class="form-group">
																	<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="others">其他:</label>
	
																	<div class="col-xs-12 col-sm-9">
																		<div class="clearfix">
																			<textarea class="input-xlarge" name="others" id="others"></textarea>
																		</div>
																	</div>
																</div>
	
															</form>
													</div>

												</div>

												<!-- /section:plugins/fuelux.wizard.container -->
											</div>

											<hr />
											<div class="wizard-actions">
												<!-- #section:plugins/fuelux.wizard.buttons -->
												<button class="btn btn-prev">
													<i class="ace-icon fa fa-arrow-left"></i>
													上一步
												</button>

												<button class="btn btn-success btn-next" data-last="提交">
													下一步
													<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
												</button>

												<!-- /section:plugins/fuelux.wizard.buttons -->
											</div>

											<!-- /section:plugins/fuelux.wizard -->
										</div><!-- /.widget-main -->
									</div><!-- /.widget-body -->
								</div>

							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

		</div><!-- /.main-container -->

		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/static/ace/components/jquery/dist/jquery.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="/static/ace/components/jquery.1x/dist/jquery.js"></script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/static/ace/components/_mod/jquery.mobile.custom/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
		<script src="/static/ace/components/bootstrap/dist/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/static/ace/components/fuelux/js/wizard.js"></script>
		<script src="/static/ace/components/jquery-validation/dist/jquery.validate.js"></script>
		<script src="/static/ace/components/jquery-validation/dist/additional-methods.js"></script>
		<script src="/static/ace/components/bootbox.js/bootbox.js"></script>
		<script src="/static/ace/components/jquery.maskedinput/dist/jquery.maskedinput.js"></script>
		<script src="/static/ace/components/select2/dist/js/select2.js"></script>

		<!-- ace scripts -->
		<script src="/static/ace/assets/js/src/elements.scroller.js"></script>
		<script src="/static/ace/assets/js/src/elements.colorpicker.js"></script>
		<script src="/static/ace/assets/js/src/elements.fileinput.js"></script>
		<script src="/static/ace/assets/js/src/elements.typeahead.js"></script>
		<script src="/static/ace/assets/js/src/elements.wysiwyg.js"></script>
		<script src="/static/ace/assets/js/src/elements.spinner.js"></script>
		<script src="/static/ace/assets/js/src/elements.wizard.js"></script>
		<script src="/static/ace/assets/js/src/elements.aside.js"></script>
		<script src="/static/ace/assets/js/src/ace.js"></script>
		<script src="/static/ace/assets/js/src/ace.basics.js"></script>
		<script src="/static/ace/assets/js/src/ace.scrolltop.js"></script>
		<script src="/static/ace/assets/js/src/ace.touch-drag.js"></script>
		<script src="/static/ace/assets/js/src/ace.widget-box.js"></script>
		<script src="/static/ace/assets/js/src/ace.widget-on-reload.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
		submitData = () => {
				var payload = {
					name: $('#name').val(),
					mobile: $('#mobile').val(),
					sex: $("input[name='sex']:checked").val(),
					nation: $('#nation').val(),
					originaddress: $('#originaddress').val(),
					birthaddress: $('#birthaddress').val(),
					birthdate: $('#birthdate').val(),
					age: $('#age').val(),
					college: $('#college').val(),
					graduatedate: $('#graduatedate').val(),
					company: $('#company').val(),
					address: $('#address').val(),
					industry: $('#industry').val(),
					requirement: $('#requirement').val(),
					others: $('#others').val()
				};
			var opts = {
				method: 'POST',
				body: JSON.stringify(payload),
				headers: {
					'Content-Type': 'application/json'
				}
			};
			console.log(JSON.stringify(payload));
			let url = '/user/add';
			fetch(url, opts)
				.then(
					function(res) {
						if (res.ok) {
							//成功之后
							console.log(res)
						} else if (res.status === 500) {
							
						} else if (res.status === 406) {
							
						}
					},
					function(e) {
					}
				)
				.catch(error => {
				});
			}
			jQuery(function($) {
			
				$('[data-rel=tooltip]').tooltip();
			
				$('.select2').css('width','200px').select2({allowClear:true})
				.on('change', function(){
					$(this).closest('form').validate().element($(this));
				}); 
			
			  

				var $validation = true;
				$('#fuelux-wizard-container')
				.ace_wizard({
					//step: 2 //optional argument. wizard will jump to step "2" at first
					//buttons: '.wizard-actions:eq(0)'
				})
				.on('actionclicked.fu.wizard' , function(e, info){
					if(info.step == 1 && $validation) {
						if(!$('#validation-form').valid()) e.preventDefault();
					}
				})
				//.on('changed.fu.wizard', function() {
				//})
				.on('finished.fu.wizard', function(e) {
					submitData();
					bootbox.dialog({
						message: "注册成功!", 
						buttons: {
							"success" : {
								"label" : "确定",
								"className" : "btn-sm btn-primary"
							}
						}
					});
				}).on('stepclick.fu.wizard', function(e){
					//e.preventDefault();//this will prevent clicking and selecting steps
				});
			

				$.mask.definitions['~']='[+-]';
				$('#phone').mask('999-9999-9999');
			
				jQuery.validator.addMethod("phone", function (value, element) {
					return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
				}, "Enter a valid phone number.");
			
				$('#validation-form').validate({
					errorElement: 'div',
					errorClass: 'help-block',
					focusInvalid: false,
					ignore: "",
					rules: {
						name: {
							required: true
						},
						password: {
							required: true,
							minlength: 6
						},
						password2: {
							required: true,
							minlength: 6,
							equalTo: "#password"
						},
						mobile: {
							required: true
						}
					},
			
					messages: {
						name: {
							required: "此项不能为空.",
						},
						mobile: {
							required: "此项不能为空.",
						},
						password: {
							required: "请输入至少6位密码.",
							minlength: "请输入至少6位密码."
						},
						password2: {
							required: "请输入至少6位密码.",
							minlength: "请输入至少6位密码."
						}
					},
			
			
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
			
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
						$(e).remove();
					},
			
					errorPlacement: function (error, element) {
						if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
			
					submitHandler: function (form) {
					},
					invalidHandler: function (form) {
					}
				});
			

				$('#modal-wizard-container').ace_wizard();
				$('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');

			})
		</script>
	</body>
</html>
